<script setup lang="ts">
import useAppState from "~/hooks/useAppState";

const { source, ellipsis = true } = defineProps<{
  source: any;
  ellipsis?: boolean;
}>();

const { push } = useRouter();
const appState = useAppState();

function productClick() {
  if (source.id) {
    push(`/detail/${source.id}`);
    appState.value.menuIsActive = false;
  }
}
</script>

<template>
  <div
    :class="[
      'flex',
      source.id ? 'hover:text-#7948ea hover:cursor-pointer' : '',
    ]"
    @click="productClick"
  >
    <div class="flex-none">
      <img
        :src="source.cover"
        :alt="source.title"
        class="w-160px h-90px rounded-md bg-#ccc mr-4"
      />
    </div>
    <div class="flex-auto min-w-0">
      <!-- <span
        class="text-xs leading-none text-white bg-#7948ea py-0.5 px-1 rounded-1"
        >NEW
      </span> -->
      <div
        class="mt-1"
        :class="{ 'line-clamp-1': ellipsis }"
        :title="source.title"
      >
        {{ source.title }}
      </div>
      <div
        class="mt-1 text-xs text-3d3d3d break-all"
        :class="{ 'line-clamp-2': ellipsis }"
        :title="source.tag"
      >
        {{ source.tag }}
      </div>
    </div>
  </div>
</template>
